<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
/* 
1. 浮动布局
.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
  height: 100%;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
  height: 100%;
} */

/* 
2. 浮动布局
.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
  height: 100%;
}
.right {
  background: gold;
  height: 100%;
  overflow: hidden;
}  */

/* .outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
  height: 100px;
}    */
.container{
  height: 500px;
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . slidebar"
    "footer footer footer footer"
}
.item1{
  grid-area: header;
  background: tomato;
}
.item2{
  background: yellow;
}
.item3{
  background: blue;
}
</style>
<body>
    <!-- 两栏布局
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div> -->
    <!-- 三栏布局 -->
    <!-- <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div> -->

    <!-- grid布局 -->
    <div class="container">
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
    </div>
    
</body>
</html>